<template>
  <div>
    <!--
    跨页多选：
    1. :row-key="getRowKey"
    2. getRowKey (row) {return row.id}
    3. :reserve-selection="true"
     -->
    <el-table :data="tableData" border :row-key="getRowKey" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="page"
      :page-size="size"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data () {
    return {
      page: 1, // 第几页
      size: 3, // 一页多少条
      total: 0, // 总条目数
      pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], // 可选择的一页多少条
      tableData: [], // 表格绑定的数据
      allData: [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 10
        },
        {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 11
        },
        {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 12
        },
        {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 13
        },
        {
          date: '2016-05-02',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 14
        },
        {
          date: '2016-05-04',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 15
        },
        {
          date: '2016-05-01',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 16
        },
        {
          date: '2016-05-03',
          name: '王小虎8',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 17
        },
        {
          date: '2016-05-02',
          name: '王小虎9',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 18
        },
        {
          date: '2016-05-04',
          name: '王小虎10',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 19
        },
        {
          date: '2016-05-01',
          name: '王小虎11',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 20
        },
        {
          date: '2016-05-03',
          name: '王小虎12',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 21
        },
        {
          date: '2016-05-02',
          name: '王小虎13',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 22
        },
        {
          date: '2016-05-04',
          name: '王小虎14',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 23
        },
        {
          date: '2016-05-01',
          name: '王小虎15',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 24
        },
        {
          date: '2016-05-03',
          name: '王小虎16',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 25
        },
        {
          date: '2016-05-02',
          name: '王小虎17',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 26
        },
        {
          date: '2016-05-04',
          name: '王小虎18',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 27
        },
        {
          date: '2016-05-01',
          name: '王小虎19',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 28
        },
        {
          date: '2016-05-03',
          name: '王小虎20',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 29
        },
        {
          date: '2016-05-02',
          name: '王小虎21',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 30
        },
        {
          date: '2016-05-04',
          name: '王小虎22',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 31
        },
        {
          date: '2016-05-01',
          name: '王小虎23',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 32
        },
        {
          date: '2016-05-03',
          name: '王小虎24',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 33
        },
        {
          date: '2016-05-02',
          name: '王小虎25',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 34
        },
        {
          date: '2016-05-04',
          name: '王小虎26',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 35
        },
        {
          date: '2016-05-01',
          name: '王小虎27',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 36
        },
        {
          date: '2016-05-03',
          name: '王小虎28',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 37
        },
        {
          date: '2016-05-02',
          name: '王小虎29',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 38
        },
        {
          date: '2016-05-04',
          name: '王小虎30',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 39
        },
        {
          date: '2016-05-01',
          name: '王小虎31',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 40
        },
        {
          date: '2016-05-03',
          name: '王小虎32',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 41
        },
        {
          date: '2016-05-02',
          name: '王小虎33',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 42
        },
        {
          date: '2016-05-04',
          name: '王小虎34',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 43
        },
        {
          date: '2016-05-01',
          name: '王小虎35',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 44
        },
        {
          date: '2016-05-03',
          name: '王小虎36',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 45
        },
        {
          date: '2016-05-02',
          name: '王小虎37',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 46
        },
        {
          date: '2016-05-04',
          name: '王小虎38',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 47
        },
        {
          date: '2016-05-01',
          name: '王小虎39',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 48
        },
        {
          date: '2016-05-03',
          name: '王小虎40',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 49
        },
        {
          date: '2016-05-02',
          name: '王小虎41',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 50
        },
        {
          date: '2016-05-04',
          name: '王小虎42',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 51
        },
        {
          date: '2016-05-01',
          name: '王小虎43',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 52
        },
        {
          date: '2016-05-03',
          name: '王小虎44',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 53
        },
        {
          date: '2016-05-02',
          name: '王小虎45',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 54
        },
        {
          date: '2016-05-04',
          name: '王小虎46',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 55
        },
        {
          date: '2016-05-01',
          name: '王小虎47',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 56
        },
        {
          date: '2016-05-03',
          name: '王小虎48',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 57
        },
        {
          date: '2016-05-02',
          name: '王小虎49',
          address: '上海市普陀区金沙江路 1518 弄',
          id: 58
        },
        {
          date: '2016-05-04',
          name: '王小虎50',
          address: '上海市普陀区金沙江路 1517 弄',
          id: 59
        },
        {
          date: '2016-05-01',
          name: '王小虎51',
          address: '上海市普陀区金沙江路 1519 弄',
          id: 60
        },
        {
          date: '2016-05-03',
          name: '王小虎52',
          address: '上海市普陀区金沙江路 1516 弄',
          id: 61
        }
      ]
    }
  },
  methods: {
    // 跨页多选给一个id
    getRowKey (row) {
      return row.id
    },
    handleSelectionChange (vale) {
      console.log(vale)
    },
    // 获取表格数据，自行分页(slice)
    getTabelData () {
      // allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      )
      this.total = this.allData.length
    },

    // 获取表格数据，自行分页（splice）
    getTabelData2 () {
      const data = JSON.parse(JSON.stringify(this.allData))
      this.tableData = data.splice((this.page - 1) * this.size, this.size)
      this.total = this.allData.length
    },
    // page改变时的回调函数，参数为当前页码
    currentChange (val) {
      console.log('翻页，当前为第几页', val)
      this.page = val
      this.getTabelData2()
    },
    // size改变时回调的函数，参数为当前的size
    sizeChange (val) {
      console.log('改变每页多少条，当前一页多少条数据', val)
      this.size = val
      this.page = 1
      this.getTabelData2()
    }
  },
  created () {
    this.getTabelData2()
  }
}
</script>
